import React, { useEffect, useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom';
import './AddSpecialEducation.scss'
import axios from '../../../../axios/index';
import { Button, Dropdown, InputComponent, Title } from '../../../../componet/index'
import { InboxOutlined } from '@ant-design/icons';
import type { UploadProps } from 'antd';
import { message, Upload } from 'antd';

export default function AddPoliciesAndRegulations() {

    const { Dragger } = Upload;
    const navigate = useNavigate();
    const Url = "http://localhost:3000/"
    const props: UploadProps = {
        name: 'file',
        multiple: true,
        action: 'http://localhost:3000/newCoverForEducationImg',
        onChange(info) {
            const { status } = info.file;
            if (status !== 'uploading') {
                // console.log(info.file, info.fileList);
            }
            if (status === 'done') {
                setAddObj({ ...AddObj, cover: `${Url}${info.fileList[0].response.data}` })

                message.success(`${info.file.name}上传成功~`);

            } else if (status === 'error') {
                message.error(`${info.file.name} 上传失败~`);
            }
        },
        onDrop(e) {
            console.log('Dropped files', e.dataTransfer.files);
        },
    };
    // 获取路由参数
    let { state } = useLocation();
    console.log("params:", state);

    const [type, setType] = React.useState([]);
    // 新增图文
    const [AddObj, setAddObj] = useState({
        isMyUrl: state.state == "编辑" ? state.data.isMyUrl : true,
        type: state.state == "编辑" ? state.data.type._id : '',
        title: state.state == "编辑" ? state.data.title : '',
        author: state.state == "编辑" ? state.data.author : '',
        cover: state.state == "编辑" ? state.data.cover : '',
        content: state.state == "编辑" ? state.data.content : '',
        visibleRange: state.state == "编辑" ? state.data.visibleRange : '0',
    })
    //新增参数
    useEffect(() => {
        getShowType();
    }, []);

    // 获取数据类型
    const getShowType = () => {
        axios.get('/specialEducationTypeGet').then((res) => {
            setType(res.data);
        });
    };

    // 分类
    const DropDownType = (e: any) => {
        console.log(e);
        setAddObj({ ...AddObj, type: e._id })
    }

    // 标题
    const setTitle = async (val: any) => {
        setAddObj({ ...AddObj, title: val })
    }

    // 作者
    const setAuthor = async (val: any) => {
        setAddObj({ ...AddObj, author: val })
    }
    // 添加图文
    const addPoliciesAndRegulations = async () => {
        console.log(AddObj, 2222);
        if (state.state == '新增') {
            axios.post('/specialEducationAdd', AddObj).then((res: any) => {
                console.log(res);
                if (res.code == 200) {
                    message.success('添加成功');
                    // navigate('/app/specialEducation');
                } else {
                    message.error('添加失败');
                }
            })
        } else if (state.state == '编辑') {
            console.log('编辑', state.data._id)
            axios.post(`/specialEducationUpdate?id=${state.data._id}`, AddObj).then((res: any) => {
                console.log(res);
                if (res.code == 200) {
                    message.success('修改成功');
                    navigate('/app/specialEducation');
                } else {
                    message.error('修改失败');
                }
            })
        }
    }

    const changeText = (e: any) => {
        setAddObj({ ...AddObj, content: e })
    }
    return (
        <div className='MaxBox'>
            {/* 新增图文 */}
            {/* 分类必填标识 */}
            <div className='addPoliciesAndRegulations'>
                <div className='Title'>
                    <h4>{state.state == '新增' ? "新增图文" : "编辑图文"}</h4>
                </div>
                <div className='content'>
                    {/* 来源单选框 添加必填项 */}
                    <div className='contentItem'>
                        <label htmlFor=""><span style={{ color: 'red' }}>*</span>来源：</label>
                        <input type="radio" name="source" checked={AddObj.isMyUrl == true} onChange={() => setAddObj({ ...AddObj, isMyUrl: true })} /><span>自建图文</span>
                        <input type="radio" name="source" checked={AddObj.isMyUrl == false} onChange={() => setAddObj({ ...AddObj, isMyUrl: false })} /><span>外联图文</span>
                    </div>
                    <div className='contentItem'>
                        <label htmlFor=""><span style={{ color: 'red' }}>*</span>分类：</label>
                        <Dropdown options={type} placeholder='选择类型' onChange={DropDownType} value={AddObj.type} />
                    </div>
                    <div className='contentItem'>
                        <label htmlFor=""><span style={{ color: 'red' }}>*</span>标题：</label>
                        <InputComponent onChange={setTitle} value={AddObj.title} />
                    </div>
                    <div className='contentItem'>
                        <label htmlFor="">作者：</label>
                        <InputComponent onChange={setAuthor} value={AddObj.author} />

                    </div>
                    <div className='contentItem'>
                        <label htmlFor="">封面图片：</label>
                        <Dragger {...props} className='Dragger'>
                            <p className="ant-upload-drag-icon">
                                <InboxOutlined />
                            </p>
                            <p className="ant-upload-text">点击、拖拽即可上传</p>
                        </Dragger>
                    </div>
                    <div className='contentItem'>
                        <label htmlFor=""><span style={{ color: 'red' }}>*</span>正文：</label>
                        <div >
                            <Title onChange={changeText} value={AddObj.content} />

                        </div>
                    </div>
                    <div className='contentItem'>
                        <label htmlFor=""><span style={{ color: 'red' }}>*</span>可见范围：</label>
                        <input type="radio" name="visibleRange" checked={AddObj.visibleRange == "0"} onChange={() => setAddObj({ ...AddObj, visibleRange: "0" })} /><span>全部人员公开</span>
                        <input type="radio" name="visibleRange" checked={AddObj.visibleRange == "1"} onChange={() => setAddObj({ ...AddObj, visibleRange: "1" })} /><span>党内公开</span>
                        <input type="radio" name="visibleRange" checked={AddObj.visibleRange == "2"} onChange={() => setAddObj({ ...AddObj, visibleRange: "2" })} /><span>指定对象</span>
                    </div>
                    <div className='end'></div>
                </div>
                <div className='footerButton'>
                    <div className='footer'>
                        <Button text='取消' onClick={() => navigate(-1)} setBackgroundColor='#F5F5F5' />
                        <Button text='确定' onClick={addPoliciesAndRegulations} />
                    </div>
                </div>
            </div>
        </div>
    )
}
